<!DOCTYPE html>
<html>
<head>
<title>PublicCMS 安装 - 数据库信息配置</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta charset="utf-8" />
<script src="../resource/js/jquery-1.9.1.min.js"></script>
<style type="text/css">
body {font-size: 14px;}
.install .error {color: #f00;}
.install .box {margin: 0 auto;margin-top: 20px;width: 99%;border-radius: 4px;}
.install .box p {border-bottom: 1px solid #fafafa;}
.install .box label {width: 100px;}
.install .header {height: 65px;line-height: 65px;background-color: #6999ec;border-bottom: 2px solid lightgray;}
.install .header h1 {font-size: 20px;padding-left: 10px;float: left;margin: 0px;color: #ffffff;}
.install .header div {float: right;margin-right: 10px;font-size: 13px;color: lightgray;}
.install .box-page {height: 430px;}
.install .box-page .box-content {height: 400px;overflow: auto;overflow-x: hidden;padding-left: 10px;padding-right: 10px;border-top: 1px solid #6999ec;border-left: 1px solid #6999ec;border-right: 1px solid #6999ec;border-bottom: 1px solid #6999ec;border-radius: 4px;}
.install .box-page .box-content form .wrapper{height: 35px;line-height: 35px;margin-top:5px;}
.install .box-page .box-content form label{width:140px;margin-right: 10px;;}
.install .box-page .box-content form input[type=text],input[type=number]{width:250px;height:28px;font-size: 14px;padding-left:5px;padding-right:5px;}
.install .box-page .box-content pre {font-size: 13px; white-space : pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;white-space: pre-wrap;}
.install .box-page .checkbox {line-height: 30px;height: 30px;text-align: center;}
.install .buttons {margin: auto;text-align: center;height: 60px;line-height: 60px;}
.install .buttons button {width: 120px;border: 0px;color: white;height: 30px;cursor: pointer;}
.install .active {background-color: #6999ec;}
.install .hide {display: none;}
.install .show {display: block;}
select {
	height:30px;
	line-height:30px;
}
</style>

</head>
<body class="install">
	<div class="box">
		<div class="header">
			<h1>欢迎使用 PublicCMS</h1>
			<div>${currentVersion}</div>
		</div>
		<div class="box-page page-policy">
			<div class="box-content">
				<pre>
					<p style="text-align: center;">======= PublicCMS ${currentVersion} 授权许可协议 =======</p>
一、授权许可
  1.1 该软件遵循<a href="http://opensource.org/licenses/MIT" target="_blank">MIT授权协议</a>
  1.2 您可以免费使用、复制、修改、合并、发行、散布、再授权及贩售本软件及本软件的源码。
  1.3 您可以根据您的需要修改授权协议。
  1.4 您的再发行版本，可以使用PublicCMS名义进行宣传。
  1.5 在本软件和本软件的所有副本中都必须包含版权声明。
  1.6 本软件中包含其他授权协议的第三方产品请遵守其授权协议。
二、版权
  2.1 该软件版权归PublicCMS官方所有。
三、免责声明
  3.1 本软件及所附带的文件是作为不提供任何明确的或隐含的赔偿或担保的形式提供的。
  3.2 用户出于自愿而使用本软件，您必须了解使用本软件的风险，在尚未购买产品技术服务之前，我们不承诺提供任何形式的技术支持、使用担保，也不承担任何因使用本软件而产生问题的相关责任。</pre>
			</div>

			<div class="checkbox">
				<input type="checkbox">我已阅读并同意此协议
			</div>
		</div>

		<div class="box-page hide page-install">
			<div class="box-content form">
				<div style="width:400px; margin:0 auto;">
					<h2>系统配置</h2>
					<form action="./" method="post" id="formDBConfig">
						<input type="hidden" name="step" value="dataBaseConfig"/>
						<div class="wrapper"><label>数据库地址</label><input type="text" maxlength="100" name="host" value="localhost"/></div>
						<div class="wrapper"><label>数据库端口</label><input type="number" maxlength="10" name="port" value="3306"/></div>
						<div class="wrapper"><label>数据库名称</label><input type="text" maxlength="50" name="database" value="publiccms"/></div>
						<div class="wrapper"><label>数据库用户</label><input type="text" maxlength="50" name="username"/></div>
						<div class="wrapper"><label>数据库密码</label><input type="text" maxlength="50" name="password"/></div>
					</form>
				</div>
			</div>
		</div>
		
		<!-- 数据库配置结果 -->
		<div class="box-page hide page-dbconfig-result">
			<div class="box-content">
				<div style="width:400px; margin:0 auto;" class="dbconfig-result">
				</div>
			</div>
		</div>
		
		<div class="buttons">
			<button class="active" style="display:none;">上一步</button>
			<button class="next">下一步</button>
		</div>
		
		<div class="copyright" style="font-size:12px;text-align:center;">
			<p>&copy;${.now?string('yyyy')} PublicCMS.com All Rights Reserved.</p>
		</div>
	</div>


	<script>
		var cb = $("input[type=checkbox]");
		cb.click(function() {
			if ($(this).is(':checked')) {
				$("button:last").addClass("active");
			} else {
				$("button:last").removeClass("active");
			}
		});
		
		var step = 0;
		$("button").click(function() {
			var self = this;
			var direction = $(this).hasClass("next") ? "next" : "prev";
			if (!$(this).hasClass("active")) 
				return;
			
			step += "next" == direction ? 1 : -1;
			if ("prev" == direction && step == 2 )
				step = 1;
			
			if (step > 3)
				step = 3;
			
			switch(step) {
				case 0 :
					toggleTab("page-policy");
					$("button:first").hide();
					break;
				case 1:
					toggleTab("page-install");
					$("button:first").show(); 
					$("button:last").addClass("active");
					break;
				case 2:
					$(".dbconfig-result").html("");
					var params = getFormJson($("#formDBConfig"));  
					var data = $.param(params);
					$.post(document.forms[0].action, params ,function(result){
					    $(".dbconfig-result").html(result);
					    toggleTab("page-dbconfig-result");
					    if ($(".error").length > 0) {
					    	$("button:last").removeClass("active");
						} 
					});
					break;
				case 3:
					$("button").removeClass("active");
					var params = getFormJson($("#formDataConfig"));  
					var data = $.param(params);
					$.post(document.forms[0].action, params ,function(result){
					    $(".dbconfig-result").html(result);
					    toggleTab("page-dbconfig-result");
					    if ($(".error").length > 0) {
					    	$("button").addClass("active");
						} else {
							$("button").removeClass("active");
							$("button").hide();
						}
					});
					break;
			}
		});
		
		function getFormJson (frm) {
		    var o = {};
		    var a = jQuery(frm).serializeArray();
		    jQuery.each(a, function () {
		        if (o[this.name] !== undefined) {
		            if (!o[this.name].push) {
		                o[this.name] = [o[this.name]];
		            }
		            o[this.name].push(this.value || '');
		        } else {
		            o[this.name] = this.value || '';
		        }
		    });
		    return o;
		};
		
		function toggleTab(tabId){
			$(".box-page").hide();
			$("." + tabId).toggle();
		}
		
	</script>
</body>
</html>